範例：使用者註冊頁面

架設使用者註冊頁面

• 首先架設一個使用者註冊頁面，頁面由標題、資訊輸入框、偏好設定和確認按鈕這幾個部分組成。
  
• 上面的程式提供了主頁面所需要的所有元素，並為元素指定class屬性，同時整合了一些Vue的邏輯，例如：迴圈著色和條件著色，接著要寫的是定義Vue元件。
  
• 這段程式定義了Vue元件中與頁面設定相關的一些屬性，接下來先將頁面元素的CSS樣式補齊。

//在head標籤中加入
<style>
        .container {
            margin: 0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        }
        .subTitle {
        color: gray;
        font-size: 14px;
        }
        .title {
            font-size: 45px;
        }
        .input {
            width: 90%;
        }
        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }
        .subContainer {
            text-align: left;
        }
        .field {
            font-size: 14px;
        }
        .input {
            border-radius: 6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }
        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }
        .setting {
            font-size: 9px;
            color: black;
        }
        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align: middle;
        }
        .checkbox {
            height: 20px;
            vertical-align: middle;
        }
        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            color: white;
        }
    </style>

• 執行後：
  
• 註冊頁面中，元素的UI效果預示了其部分功能，例如在輸入框上方有些標示紅星，表示此項是必填項，若使用者不填寫將無法完成註冊操作。
• 對於密碼輸入框，也將其類型設定為password，當使用者在輸入文字時，此項會被自動加密。

實現註冊頁面的使用者互動

• 接下來要新增使用者互動邏輯。
• 在使用者點擊「建立帳號」按鈕時，我們需獲取使用者輸入的使用者名稱、密碼、電子郵件及偏好設定，其中使用者名稱與密碼是必填項，且密碼長度需大於6位，對於電子郵件，也要使用正規的表示法來驗證，只有格式正確的電子郵件才允許註冊。
• 以下是改動及新增的程式部分：
  
• 上面的程式中，透過設定輸入框field物件以實現動態資料綁定，且為了方便值的操作，使用計算屬性對幾個常用的輸入框資料實現便捷的存取方法。
• 當我們點擊「建立帳號」按鈕後，createAccount方法會進行有效性驗證，我們會對每個欄位需滿足的條件進行一次驗證。
• 新增並修改上面這些程式後，執行成果如下圖：
  
• 當按照每個條件正確輸入資料時，即可註冊成功，若有欄位輸入資料不合條件時，會跳出提示通知，以下分別為電子郵件未依正確格式輸入及密碼長度不足。
  
  
• 到目前為止我們完成了一個較為完整的使用者端的註冊頁面，未來在實際應用中，最終的註冊操作還需要與後端進行互動。

今天的實作範例：使用者註冊頁面，就到此告一段落了，連續30天的不斷學習，還沒有學完這本書的所有內容，希望到目前為止所介紹的知識，都能幫助到大家！